<template>
  <div class="ai-empty-ui">
    <div class="hint-wrapper">
      <div class="doll">
        <img src="./icon-yuyin.png" class="doll-bounce" />
        <img src="./icon-shadow.png" class="doll-shadow" />
      </div>
      <div class="hint-text">
        你好，我是您的智能语音助手!<br />
        您可以向我发出如下指令：
      </div>
    </div>
    <div class="directive-item" v-for="item in DIRECTIVES" :key="item" @click="handleSelect(item)">
      {{ item }}
    </div>
    <div class="dots">......</div>
  </div>
</template>

<script lang="ts" setup>
const DIRECTIVES = [
  '青岛市GDP是多少',
  '海信探索中心的地址',
  '打开公共服务领域',
  '生成一篇经济运行情况的分析报告'
]

const emit = defineEmits(['select'])
const handleSelect = (s: string) => {
  emit('select', s)
}
</script>

<style lang="less" scoped>
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-8px);
  }
}
.ai-empty-ui {
  padding-top: 33px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  .hint-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .doll {
      position: relative;
      height: 50px;
      margin-right: 10px;
      .doll-bounce {
        animation: bounce 1s linear infinite alternate-reverse;
        width: 40px;
        height: 40px;
      }
      .doll-shadow {
        width: 35px;
        height: 13px;
        position: absolute;
        left: 2px;
        bottom: 0px;
      }
    }
    .hint-text {
      color: #21212199;
      font-size: 15px;
      line-height: 24px;
      font-weight: medium;
    }
  }

  .directive-item {
    font-size: 14px;
    color: #212121;
    border-radius: 999px;
    background-color: #f0f4fb;
    padding: 8px 16px;
    margin-bottom: 12px;
    font-weight: bold;
  }

  .dots {
    color: #212121;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>
